<template>
	<div>
		<div class="box">
			<div class="">
				<el-form
					:model="formData"
					ref="form"
					:hide-required-asterisk="true">
					<el-table
						:data="formData.insuranceConfList"
						border
						stripe
						:header-cell-class-name="setHeaderCellName">
						<el-table-column
							label="操作"
							width="100"
							align="center"
							v-if="state == 'write'">
							<template slot-scope="scope">
								<div>
									<el-button
										type="text"
										@click="remove(scope.$index)">
										删除
									</el-button>
								</div>
							</template>
						</el-table-column>
						<TableCloumn
							v-for="(item, index) in tableCloumns_insurance"
							:cellOptions="item"
							dataName="insuranceConfList"
							:state="state"></TableCloumn>
					</el-table>
					<div
						class="btn"
						@click="push"
						v-if="state !== 'readonly' && state !== 'disabled'">
						<i class="el-icon-plus"></i>
						<span>增加一行</span>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import TableCloumn from '@/views/finance/manage/tableColumn/index.vue';
	import FormItems from '@/views/finance/manage/formItems/index.vue';
	import FormItem from '@/views/finance/reimburs/formItem/index.vue';
	export default {
		components: { TableCloumn, FormItems, FormItem },
		dicts: ['quota_purchaser_type'],
		props: {
			value: {
				required: false,
			},
			state: {
				required: false,
			},
			type: {
				required: false,
			},
		},
		inject: ['details_forecast', 'details_config', '_index'],

		data() {
			return {};
		},
		computed: {
			formData: {
				get() {
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			details() {
				return this.details_forecast();
			},
			config() {
				return this.details_config();
			},
			index() {
				return this._index();
			},
			tableCloumns_insurance() {
				return [
					{
						label: '租期（年）',
						prop: 'tenancy',
						type: 'text',
					},
					{
						label: '购买方',
						prop: 'purchaserType',
						type: 'select',
						selectList: this.dict.type.quota_purchaser_type,
						// formitemPrototype: {
						//     style: {
						//         marginTop: "23px",
						//     },
						// },
						rules: true,
						event: {
							type: 'change',
							cb: row => {
								row.compulsoryAmount = undefined;
								row.carvesselAmount = undefined;
								row.commercialAmount = undefined;
							},
						},
					},
					{
						label: '交强险金额（年）',
						prop: 'compulsoryAmount',
						tag: 'price',
						type: (_, index) => {
							let row = this.formData.insuranceConfList?.[index];
							if (
								row?.purchaserType == '2' ||
								row?.purchaserType == '3'
							) {
								return 'text';
							} else {
								return 'input_number';
							}
						},
						rules: true,
					},
					{
						label: '车船税金额（年）',
						prop: 'carvesselAmount',
						tag: 'price',
						type: (_, index) => {
							let row = this.formData.insuranceConfList?.[index];
							if (
								row?.purchaserType == '2' ||
								row?.purchaserType == '3'
							) {
								return 'text';
							} else {
								return 'input_number';
							}
						},

						rules: true,
					},
					{
						label: '商业险金额（年）',
						prop: 'commercialAmount',
						tag: 'price',
						type: (_, index) => {
							let row = this.formData.insuranceConfList?.[index];
							if (
								row?.purchaserType == '2' ||
								row?.purchaserType == '3'
							) {
								return 'text';
							} else {
								return 'input_number';
							}
						},
						rules: true,
					},
				];
			},
		},
		created() {
			this.formData.insuranceConfList ??= [];
		},
		beforeDestroy() {
			if (this.notEmpty(this.details?.productList?.[this.index])) {
				this.formData.insuranceConfList = null;
				Reflect.deleteProperty(this.formData, 'insuranceConfList');
			}
		},
		mounted() {},
		methods: {
			push() {
				this.formData.insuranceConfList ??= [];
				this.formData.insuranceConfList.push({
					tenancy: this.formData.insuranceConfList?.length + 1,
				});
			},
			remove(index) {
				this.formData.insuranceConfList.splice(index, 1);
			},
			setHeaderCellName({ columnIndex }) {
				if (this.state == 'readonly') {
					return '';
				}
				if (columnIndex !== 0 && columnIndex !== undefined) {
					return 'ruleHeaderCell';
				}
			},
			valid() {
				return new Promise(async resolve => {
					let result = true;
					let refs = Object.values(this.$refs);
					for (let index = 0; index < refs?.length; index++) {
						const ref = refs[index];
						if (
							Object.prototype.toString.call(ref) ==
							'[object Array]'
						) {
							for (let i = 0; i < ref.length; i++) {
								const element = ref[i];
								if (element?.valid) {
									let rc = await element?.valid?.();
									result = result && rc;
								}
								if (element?.validate) {
									let rf = await this._valid(ref);
									result = result && rf;
								}
								if (element?.form_validate) {
									let rf = await this._valid(
										ref,
										'form_validate',
									);
									result = result && rf;
								}
							}
						} else {
							if (ref?.valid) {
								let rc = await ref?.valid?.();
								result = result && rc;
							}
							if (ref?.validate) {
								let rf = await this._valid(ref);
								result = result && rf;
							}
							if (ref?.form_validate) {
								let rf = await this._valid(
									ref,
									'form_validate',
								);
								result = result && rf;
							}
						}
					}

					resolve(result);
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 48px;
		background: #ffffff;
		border-radius: 4px;
		border: 1px solid #dadada;
		color: #1890ff;
		margin-top: 15px;
		font-size: 14px;
		cursor: pointer;
	}
</style>
